<script lang="ts" setup>
import { MdCatalog, MdPreview } from 'md-editor-v3'
import type { ResultType } from '@/type/type'
import 'md-editor-v3/lib/style.css'
import { type ArticleVO, getArticleApi, initArticleVO } from '@/request/api/article'
import { useStyleStore } from '@/stores/style'
import { useScrollStore } from '@/stores/scroll'
import { Code } from '@/request/code'
import { updateLikeApi } from '@/request/api/like'

const route = useRoute()

const styleStore = useStyleStore()
const scrollStore = useScrollStore()
// 主题
const previewTheme = ['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis']
let preview = ref<string>('default')

const updateLikeCount = () => {
  const id = Number(route.params.id) || 0
  updateLikeApi(id).then((res: ResultType<boolean>) => {
    if (res.code === Code.SUCCESS) {
      article.value.likeCount = article.value.likeCount + 1
    }
  })
}

const article = ref<ArticleVO>(initArticleVO())
onMounted(() => {
  const id = Number(route.params.id) || 0
  getArticleApi(id).then((res: ResultType<ArticleVO>) => {
    if (res.code === Code.SUCCESS) {
      article.value = res.data
    }
  })
})
</script>

<template>
  <TopImageTemplate :img="article.cover" class="">
    <template #title>
      <el-container class="items-center gap-2" direction="vertical">
        <span class="text-3xl ellipsis-1 flowing-text">{{ article.title }}</span>
        <span class="flex items-center use-font-theme gap-2">
          <SvgIcon :message="article.likeCount + ''" name="praise" />
          <SvgIcon :message="article.viewCount + ''" name="footprint" />
        </span>
        <span class="text-amber-500">{{ article.createTime }}</span>
      </el-container>
    </template>

    <el-container class="inner-box gap-10 justify-center relative" direction="vertical">
      <MdPreview
        v-model="article.content"
        :preview-theme="preview"
        :theme="styleStore.background.bgType"
        class="use-radius-sm use-transitions-shadow pb-10"
        editorId="my-preview"
        readonly="true"
      />
      <span class="m-auto">文章来自：{{ article.origin }}</span>
      <el-affix :offset="40" class="mx-auto" position="bottom">
        <span class="flex items-center justify-between w-48 py-1.5 px-4 border-2 rounded-full">
          <a href="javascript:">
            <el-dropdown>
              <SvgIcon name="palette" svg-class="!size-8" />
              <template #dropdown>
                <span class="!text-base flex py-1 flex-col">
                  <a
                    v-for="(p, i) in previewTheme"
                    :key="i"
                    :class="
                      'py-1 px-5 flex use-hover-color use-transitions-colors-short ' +
                      (preview === p ? 'text-amber-500' : '')
                    "
                    href="javascript:"
                    @click="preview = p"
                  >
                    {{ p }}
                  </a>
                </span>
              </template>
            </el-dropdown>
          </a>
          <a href="javascript:">
            <el-dropdown>
              <SvgIcon name="menu" svg-class="!size-8" />
              <template #dropdown>
                <MdCatalog
                  :scrollElement="scrollStore.scroll.scrollRef"
                  :theme="styleStore.background.bgType"
                  editorId="my-preview"
                />
              </template>
            </el-dropdown>
          </a>
          <a href="javascript:" @click="updateLikeCount">
            <SvgIcon name="praise" svg-class="!size-8" />
          </a>
        </span>
      </el-affix>
      <Copyright />
      <Comment v-if="article.isComment" :id="Number(route.params.id)" />
    </el-container>
  </TopImageTemplate>
</template>

<style lang="scss" scoped></style>
